import React, {Component} from 'react';
import {View, Text, TouchableOpacity, Animated, StyleSheet} from 'react-native';

const px = pxWidth => {
  if (width === 1) {
    return StyleSheet.hairlineWidth;
  }
  return Math.floor(width / 375 * pxWidth);
}

/**
 * tab按钮栏容器组件
 * @type {ReactCompnent}
 */
export const TabBar = props => {
    const {
        leftWidth = 0,
        rightWidth = 0,
        backgroundColor = '#ffffff',
        left = undefined,
        right = undefined,
    } = props;

    return (
        <View style={[styles.tab, {backgroundColor}]}>
            {
                left ?
                    <View style={[styles.tabLeft, {width: leftWidth}]}>
                        {left}
                    </View> : undefined
            }
            <TabItem {...props} />
            {
                right ?
                    <View style={[styles.tabRight, {width: rightWidth}]}>
                        {right}
                    </View> : undefined
            }
        </View>
    );
}

/**
 * tab 标签
 * @type {ReactCompnent}
 */
class TabItem extends Component {
    tabOnPress = index => {
        const {
            goToPage, tabOnPress = () => {
            }
        } = this.props;

        goToPage(index);
        tabOnPress(index);
    }

    /**
     * 渲染tab导航栏按钮
     * @param  {Object} tab   按钮信息
     * @param  {Number} index 序号
     * @return {ReactComponent}
     */
    renderItem = (tab, index) => {
        const {
            activeTab,
            tabItemStyle = {},
            backgroundColor,
            tintColor = '#999',
            activeTintColor = '#3398f7',
            tintStyle = {borderBottomWidth: 0, borderBottomColor: '#fff'},
            activeTintStyle = {borderBottomWidth: 1, borderBottomColor: '#3398f7'},
        } = this.props;

        const color = activeTab === index ? activeTintColor : tintColor;

        return (
            <TouchableOpacity
                key={index}
                onPress={() => this.tabOnPress(index)}
                style={[styles.tabButton, {backgroundColor}]}
            >
                {
                    typeof tab === 'function' ?
                        tab({tintColor: color}) :
                        <Text style={[
                            styles.tabButtonText,
                            {color: color},
                            tabItemStyle,
                            activeTab === index ? activeTintStyle : tintStyle
                        ]}>
                            {tab}
                        </Text>
                }
            </TouchableOpacity>
        );
    }

    render() {
        const {
            tabs,
            containerWidth,
            scrollValue,
            leftWidth = 0,
            rightWidth = 0,
            underlineWidth,
            underlineStyle = {}
        } = this.props;

        const numberOfTabs = tabs.length;
        const tabUnderlineStyle = {
            position: 'absolute',
            width: underlineWidth || (containerWidth - leftWidth - rightWidth) / numberOfTabs,
            height: 2,
            backgroundColor: '#3398f7',
            bottom: 0,
        };

        const left = {
            transform: [
                {
                    translateX: this.props.scrollValue.interpolate({
                        inputRange: [0, 1,],
                        outputRange: [0, (containerWidth - leftWidth - rightWidth) / numberOfTabs,],
                    })
                }
            ]
        };

        return (
            <View style={[styles.tab, {flex: 1, position: 'relative'}]}>
                {tabs.map(this.renderItem)}
                <Animated.View style={[tabUnderlineStyle, left, underlineStyle,]}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tab: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    tabButton: {
        flex: 1,
        alignItems: 'center'
    },
    tabButtonText: {
        padding: 14,
        fontSize: 16,
    },
    tabLeft: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        paddingLeft: px(20),
    },
    tabRight: {
        justifyContent: 'center',
        alignItems: 'flex-end',
        paddingRight: px(20),
    }
})